<template>
  <div class="introduction">
    <div class="search">
      <el-input
        clearable
        @clear="load"
        style="width: 260px; margin-right: 5px"
        v-model="data.title"
        placeholder="请输入标题查询"
        :prefix-icon="Search"
      />
      <el-button type="primary" style="margin-left: 15px;" @click="load">查 询</el-button>
    </div>
  </div>
  <div class="tool">
     <div>
        <el-button type="success" @click="handleAdd" style="margin: 15px;" v-if="data.user.role==='USER'">新 增</el-button>
        <el-button type="danger" @click="deleteBatch" style="margin: 15px;" >删 除</el-button>
      </div>

      <el-dialog title="信息新增" v-model="data.formVisible" width="800" destroy-on-close>
      <el-form ref="formRef" :rules="data.rules" :model="data.form" label-width="80px" style="padding: 20px 30px 10px 0">
        <el-form-item prop="img" label="攻略图片">
          <el-upload
            action="http://localhost:8080/files/upload"
            :headers="{ token: data.user.token }"
            :on-success="handleSearch"
            list-type="picture"
          >
            <el-button type="primary">上传头像</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item prop="title" label="攻略标题">
          <el-input v-model="data.form.title" autocomplete="off" placeholder="请输入标题"/>
        </el-form-item>
        <el-form-item prop="title" label="攻略类型">
           <el-select
            v-model="data.form.categoryId"
            placeholder="请选择攻略分类"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in data.categoryData"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="content" label="攻略详情">
            <div style="border: 1px solid #ccc; width: 100%">
                <Toolbar
                    style="border-bottom: 1px solid #ccc"
                    :editor="editorRef"
                    :mode="mode"
                />
                <Editor
                    style="height: 500px; overflow-y: hidden;"
                    v-model="data.form.content"
                    :mode="mode"
                    :defaultConfig="editorConfig"
                    @onCreated="handleCreated"
                />
            </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.formVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
   <div class="content" >
      <el-table :data="data.tableData" style="width: 100%" :header-cell-style="{ color: '#333', backgroundColor: '#eaf4ff' }">
        <el-table-column label="攻略图片">
          <template #default="scope">
            <el-image v-if="scope.row.img" :src="scope.row.img" :preview-src-list="[scope.row.img]" :preview-teleported="true"
                      style="width: 80px; height: 80px; border-radius: 5px; display: block" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="攻略标题" />
        <el-table-column prop="categoryName" label="攻略类型"/>
        <el-table-column prop="userName" label="发布用户" />
        <el-table-column prop="content" label="攻略内容">
            <template v-slot="scope">
                <el-button type="primary" @click="viewContent(scope.row.content)">点击查看</el-button>
            </template>
        </el-table-column>
        
        <el-table-column prop="time" label="发布时间" />
        <el-table-column  label="操作">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
        
      </el-table>
      <el-dialog title="攻略信息" v-model="data.viewVisible" width="60%" destroy-on-close>
            <div v-html="data.content" style="padding: 0 20px"></div>
        </el-dialog>
    </div>
    <div class="card">
      <el-pagination
          v-model:current-page="data.pageNum"
          v-model:page-size="data.pageSize"
          :page-size="data.pageSize"
          layout="total,sizes, prev, pager, next"
          :total="data.total"
          :page-sizes="[5, 10, 20, 40, 80]"
          @current-change="load"
          @size-change="load"
      />
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import request from '@/utils/request'
import { ElMessage,ElMessageBox } from 'element-plus'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, reactive, ref, shallowRef} from "vue";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const data = reactive({
    user:JSON.parse(localStorage.getItem('code_user')||'{}'),
    title: null,
    pageNum: 1,
    pageSize: 5,
    total: 0,
    tableData: [],
    formVisible: false,
    viewVisible:false,
    content:'',
    form:{
      title:'',
      time:'',
      content:'',
      img:''
  },
  categoryData:[],
  rules:{
    title: [
      { required: true, message: '请输入标题', trigger: 'blur' },
      // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ],
    content: [
      { required: true, message: '请输入内容', trigger: 'blur' },
      // { min: 3, max:5, message: '长度在 3 到 5 个字符',}
    ],
  },
})

//  初始化开始
/* wangEditor5 初始化开始 */
const editorRef = shallowRef()  // 编辑器实例，必须用 shallowRef
const mode = 'default' 
const editorConfig = { MENU_CONF: {} }
// 图片上传配置
editorConfig.MENU_CONF['uploadImage'] = {
  headers: {
    token: data.user.token,
  },
  server: 'http://localhost:8080/files/wang/upload',  // 服务端图片上传接口
  fieldName: 'file'  // 服务端图片上传接口参数
}
// 组件销毁时，也及时销毁编辑器，否则可能会造成内存泄漏
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
// 记录 editor 实例，重要！
const handleCreated = (editor) => {
  editorRef.value = editor
}
/* wangEditor5 初始化结束 */

const load = () => {
  request.get('/introduction/selectPage',{
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      title:data.title
    }
  }).then(res=>{
    if(res.code=='200'){
        data.tableData=res.data?.list
        data.total=res.data?.total
    }else{
        ElMessage.error(res.msg)
    }
  })
}
load()

const handleAdd = () => {
  data.formVisible = true
  data.form = {}
}
const handleSearch=(res)=>{
  data.form.img=res.data
}

const add=()=>{
    request.post('/introduction/add',data.form).then(res=>{
        if(res.code=='200'){
            ElMessage.success('新增成功')
            data.formVisible=false
            load()
        }else{
            ElMessage.error(res.msg)
        }
    })
}

const update=()=>{
    request.post('/introduction/update',data.form).then(res=>{
        if(res.code=='200'){
            ElMessage.success('修改成功')
            data.formVisible=false
            load()
        }else{
            ElMessage.error(res.msg)
        }
    })
}

const save=()=>{
    data.form.id? update():add()
}

const handleEdit=(row)=>{
  data.form=JSON.parse(JSON.stringify(row))
  data.formVisible=true

}

const del=(id)=>{
  ElMessageBox.confirm("是否删除该条信息？",'删除确认',{type:'warning'}).then(res=>{
    request.delete('/introduction/delete/'+id).then(res=>{
      if(res.code=='200'){
        ElMessage.success("删除成功")
        load()
      }else{
        ElMessage.error("删除失败")
      }
    })
  }).catch(res=>{
    console.log('res',res)
  })
}
const viewContent = (content) => {
    data.content = content  
    data.viewVisible = true
}

const loadCategory=()=>{
  request.get('/category/selectAll').then(res=>{
    if(res.code=='200'){
      console.log('res.data',res.data)
      data.categoryData=res.data
      // console.log('data.categoryData',data.categoryData)

    }else{
      ElMessage.error(res.msg)
    }
  })
}
loadCategory()
</script>
